<template>
  <div class="login_bg flex_col">
    <label class="title_txt">您好,</label>
    <label class="title_txt2">欢迎来到内蒙古智慧能源大数据平台</label>
    <div class="v_phone flex_row">
      <van-dropdown-menu class="flex1 ml-16" :overlay="false">
        <van-dropdown-item v-model="value"
                           :options="option" />
      </van-dropdown-menu>
      <div class="line_vertical"></div>
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field class="flex4 pdt12"
                 v-model="tel"
                 type="tel"
                 placeholder="请输入手机号" />
    </div>
    <div class="v_pwd flex_row">
      <label class="flex1 pwd_txt mr-16">密码</label>
      <div class="line_vertical"></div>
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field class="flex4 pdt12"
                 v-model="password"
                 type="password"
                 placeholder="请输入密码" />
    </div>
    <div class="flex_row mt10 mr48">
      <div class="flex1"></div>
      <div class="forgetPwd" @click="forgetPwd">忘记密码?</div>
    </div>
    <div class="flex_row">
      <button class="btn"
            @click.prevent.stop="toLogin">登录</button>
    </div>
    <div class="flex_row mt20">
      <div class="flex1"></div>
      <div class="register" @click="toRegister">注册</div>
      <div class="flex1"></div>
    </div>
  </div>
</template>
<script>
//导入组件
import Vue from 'vue';
import { DropdownMenu, DropdownItem, Field } from 'vant';

//注册组件
Vue.use(DropdownMenu).use(DropdownItem).use(Field);
export default {
  name: 'login',

  data () {
    return {
      value: 0,
      option: [
        { text: '+86', value: 0 },
        { text: '+87', value: 1 },
        { text: '+88', value: 2 },
      ],
      tel: "",
      password:""
    }
  },

  methods: {
    //登录
    toLogin () {
      this.$router.push({
        path: '/chart'
      })
    },

    //忘记密码
    forgetPwd(){},

    //注册
    toRegister(){
      this.$router.push({
        path: '/register'
      })
    }
  }
}

</script>

<style lang="less" scoped>
.login_bg {
  background: url("../assets/images/login_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
}
.title_txt {
  font-size: 32px;
  color: #ffffff;
  margin-top: 14%;
  margin-left: 48px;
}
.title_txt2 {
  font-size: 16px;
  color: #fefbfb;
  margin-top: 10px;
  margin-left: 48px;
}
.v_phone {
  background: transparent;
  margin-top: 40px;
  margin-left: 48px;
  margin-right: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.v_pwd{
  background: transparent;
  margin-top: 20px;
  margin-left: 48px;
  margin-right: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.line_vertical {
  width: 1px;
  height: 10px;
  margin: 20px 0px 0px 10px;
  background: #ffffff;
}
.line_horizontal {
  width: 100%;
  height: 1px;
  background: #ffffff;
}
/deep/ .van-cell {
  background: transparent;
}
/deep/.van-field__control {
  color: #ffffff;
}
/deep/ .van-dropdown-menu__bar {
  background: transparent;
}
/deep/ .van-dropdown-menu__title {
  color: #ffffff;
}
/deep/.van-popup--top{
  left:48px;
  width: 20%;
}
/deep/.van-dropdown-menu__bar{
  box-shadow: none;
}
.pwd_txt{
  margin-top: 14px;
  font-size: 14px;
  color: #ffffff;
}
.btn {
  margin-top: 8%;
  margin-left: 48px;
  margin-right: 48px;
  width: 100%;
  height: 50px;
  color: #4980FF;
  background-color: #ffffff;
  border-radius: 4px;
  border: none;
}
/deep/ input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #ffffff;
}
.forgetPwd{
  font-size: 12px;
  color: #ffffff;
  text-decoration: underline;
}
.register{
  color: #ffffff;
  font-size: 16px;
}
.ml-16{
  margin-left: -16px;
}
.mr-16{
  margin-right: -16px;
}
</style>
